<template>
    <div class="logIndex sb">
        <div class="logitem">1</div>
        <div class="logitem center">

            <div class="box center">

                <div class="box_item box_item_top  center">
                    苍穹外卖
                </div>
                <div class="box_item box_item_bottom">
                    <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" status-icon :rules="rules"
                        label-width="auto" class="demo-ruleForm">
                        <el-form-item prop="username">
                            <el-input :prefix-icon="User" class="el_input" v-model="ruleForm.username" autocomplete="off" />
                        </el-form-item>
                        <el-form-item prop="password">
                            <el-input :prefix-icon="Lock" class="el_input" v-model="ruleForm.password" type="password"
                                autocomplete="off" />
                        </el-form-item>

                        <el-form-item>
                            <el-button class="el_button" type="primary" @click="submitForm(ruleFormRef)">
                                登录
                            </el-button>

                        </el-form-item>
                    </el-form>
                </div>


            </div>
        </div>
    </div>
</template>

<script setup >
import { reactive, ref } from 'vue'
import useUserStore from '@/stores/modules/user'
import { User, Lock } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import { ElNotification } from 'element-plus'
import { getTime } from '@/utils/time'
const timePeriod = getTime()
const time = getTime()
const $router = useRouter()
const ruleFormRef = ref()
const userStore = useUserStore()


const validatePass = (rule, value, callback) => {
    if (value === '') {
        callback(new Error('账号不能为空'));
    } else {
        const reg = /^[A-Za-z\d]+$/; // 只允许字母或数字
        if (!reg.test(value)) {
            callback(new Error('账号只能由字母或数字组成，不能包含特殊字符'));
        } else {
            callback(); // 校验通过
        }
    }
};


const validatePass2 = (rule, value, callback) => {
    if (value === '') {
        callback(new Error('密码不能为空'));
    } else {
        const reg = /^[A-Za-z\d]+$/;
        if (!reg.test(value)) {
            callback(new Error('密码只能包含字母或数字'));

        } else {
            callback();
        }
    }
};


const ruleForm = reactive({
    username: 'admin',
    password: '123456',

})

const rules = reactive({
    username: [{ validator: validatePass, trigger: 'blur' }],
    password: [{ validator: validatePass2, trigger: 'blur' }],

})

const submitForm = (formEl) => {
    if (!formEl) return
    formEl.validate((valid) => {
        if (valid) {
            login()
        } else {
            console.log('error submit!')
        }
    })
}

//  登录
const login = async () => {

    try {
        //也可以书写.then语法
        await userStore.userLogin(ruleForm)
        //编程式导航跳转到展示数据的首页
        $router.push('/home')
        //登录成功的提示信息
        ElNotification({
            type: 'success',
            message: `登录成功！ ${timePeriod}好`,
        })
        //登录成功,加载效果也消失
        // loading.value = false
    } catch (error) {
        //登陆失败加载效果消失
        // loading.value = false
        //登录失败的提示信息
        ElNotification({
            type: 'error',
            message: (error).message,
        })
    }
}




</script>

<style  scoped lang="scss">
.logIndex {
    width: 100%;
    height: 100%;
    min-height: 100vh;
    background-color: red;

    .logitem {
        width: 50%;
        height: 100vh;
        background-color: blue;

        .box {
            width: 50%;
            height: 60%;

            padding: 10px;
            flex-direction: column;

            .box_item {
                width: 100%;


            }

            .box_item_top {
                font-size: 30px;
                font-weight: bold;
                flex: 1;
            }

            .box_item_bottom {

                flex: 2;
            }

            .el_input {
                width: 100%;
                margin-bottom: 20px;
                border: none;
                border-bottom: 1px solid #EEEEEE;
            }

            .el_button {
                background-color: #FFBA00;
                width: 100%;
                margin-top: 30px;
                padding: 20px 0;
                border-radius: 30px;
            }
        }
    }

    .logitem:nth-child(2) {
        background-color: #fff;
    }
}
</style>
